<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-orientation" content="portrait" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="msapplication-tap-highlight" content="no" />
		<link rel="stylesheet" href="../js/plugins/element-ui/element-ui.css">
		<!--fontAwesome-->
		<link rel="stylesheet" href="../css/front/font-awesome.min.css">
		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" href="../css/admin/index.css">
	</head>

	<body>
		<div id="app">
			<el-row class="container">
				<el-col :span="24" class="header">
					<el-col v-cloak :span="9" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
						{{collapsed ? '' : sysName}}
					</el-col>
					<el-col :span="10">
						<div class="tools" v-on:click.prevent="collapse">
							<i class="fa fa-align-justify"></i>
						</div>
					</el-col>
					<el-col :span="4" class="userinfo">
						<el-dropdown>
							<span class="el-dropdown-link">
						   <span class="el-dropdown-link userinfo-inner">
								<img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>我的消息</el-dropdown-item>
								<el-dropdown-item>设置</el-dropdown-item>
								<el-dropdown-item divided v-on:click.native="logout">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</el-col>
				</el-col>
				<el-row :gutter="20" class="main">
					<el-col :span="4" class="el-menu" v-show="!collapsed">
						<!--导航-->
						<el-menu class="el-menu-vertical-demo">

							<template v-for="(item,index) in menuList" v-if="!item.hidden">
								<el-submenu :index="item.path" v-if="!item.leaf">
									<template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
									<el-menu-item-group>
										<!--  <template slot="title">{{item.name}}</template>-->
										<el-menu-item v-for="child in item.children" v-on:click="getMenu(child.url)" :index="item.path+'-'+child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
									</el-menu-item-group>
									<!--<el-menu-item-group title="分组2">
		          <el-menu-item index="1-3">权限设置</el-menu-item>
		        </el-menu-item-group>
		        <el-submenu index="1-4">
		          <template slot="title">选项4</template>
		          <el-menu-item index="1-4-1">选项1</el-menu-item>
		        </el-submenu>-->
								</el-submenu>
								<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.path" v-on:click="getMenu(item.children[0].url)">
									<i class="el-icon-menu"></i>{{item.children[0].name}}</el-menu-item>
							</template>

							<!--		  	  
		      <el-submenu index="1">
		        <template slot="title"><i class="el-icon-message"></i>用户管理</template>
		        <el-menu-item-group>
		          <template slot="title">会员管理</template>
		          <el-menu-item index="1-1">选项1</el-menu-item>
		          <el-menu-item index="1-2">选项2</el-menu-item>
		        </el-menu-item-group>
		        <el-menu-item-group title="分组2">
		          <el-menu-item index="1-3">权限设置</el-menu-item>
		        </el-menu-item-group>
		        <el-submenu index="1-4">
		          <template slot="title">选项4</template>
		          <el-menu-item index="1-4-1">选项1</el-menu-item>
		        </el-submenu>
		      </el-submenu>
		      <el-menu-item index="2"><i class="el-icon-menu"></i>权限设置</el-menu-item>
		      <el-menu-item index="3"><i class="el-icon-setting"></i>数据库管理</el-menu-item>
		      <el-menu-item index="4"><i class="el-icon-setting"></i>文章管理</el-menu-item>
		      <el-menu-item index="5"><i class="el-icon-setting"></i>栏目管理</el-menu-item>
		      <el-menu-item index="6"><i class="el-icon-setting"></i>广告管理</el-menu-item>
		      <el-menu-item index="7"><i class="el-icon-setting"></i>公告管理</el-menu-item>
		      <el-menu-item index="8"><i class="el-icon-setting"></i>网站设置</el-menu-item>-->
						</el-menu>

					</el-col>

					<!--导航菜单-折叠后-->
					<ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
						<li v-for="(item,index) in menuList" class="el-submenu item">
							<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
								<i :class="item.iconCls"></i>
							</div>
							<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
								<li v-for="child in item.children" class="el-menu-item" v-on:click="getMenu(child.url)" style="padding-left: 40px;">{{child.name}}
								</li>
							</ul>
						</li>
					</ul>
					<el-col :span="20" class="min-right">
						<iframe id='minWarp' src="index.html" width="100%" height="100%" style="border: 0;"></iframe>
					</el-col>
				</el-row>
			</el-row>
		</div>
		<script type="text/javascript" src="../js/plugins/vue/vue.min.js"></script>
		<script type="text/javascript" src="../js/plugins/element-ui/element-ui.js"></script>
		<!--<script type="text/javascript" src="../js/plugins/jQuery/jquery-3.1.1.min.js"></script>-->
		<script type="text/javascript" src="../js/admin/main.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					sysName: '贵州绿建云后台',
					sysUserName: '系统管理员',
					sysUserAvatar: '../img/css/common/fn_2.jpg',
					isCollapse: false,
					collapsed: false,
					menuList: [{
							"path": '1',
							"name": '系统设置',
							"iconCls": 'el-icon-setting', //图标样式class
							"children": [{
									"path": '1',
									"name": '用户管理',
									"url": "permissions/home.html"
								},
								{
									"path": '2',
									"name": '权限设置',
									"url": "user/list.html"
								},
								{
									"path": '3',
									"name": '网站设置',
									"url": "config/index.html"
								}
							]
						},
						{
							"path": '2',
							"name": '数据库管理',
							"leaf": true, //只有一个节点
							"iconCls": 'el-icon-message', //图标样式class
							"icon": 'el-icon-setting',
							"children": [{
								"path": '1',
								"name": '数据库管理',
								"url": "database/index.html"
							}]

						},
						{
							"path": '3',
							"name": '栏目管理',
							"leaf": true, //只有一个节点
							"iconCls": 'el-icon-message', //图标样式class
							"icon": 'el-icon-setting',
							"children": [{
								"path": '1',
								"name": '栏目管理',
								"url": "column/list.html"
							}]

						},
						{
							"path": '4',
							"name": '广告管理',
							"leaf": true, //只有一个节点
							"iconCls": 'el-icon-message', //图标样式class
							"icon": 'el-icon-setting',
							"children": [{
								"path": '1',
								"name": '广告管理',
								"url": "advertising/list.html"
							}]

						}, {
							"path": '5',
							"name": '新闻管理',
							"leaf": true, //只有一个节点
							"iconCls": 'el-icon-message', //图标样式class
							"icon": 'el-icon-setting',
							"children": [{
								"path": '1',
								"name": '新闻管理',
								"url": "news/list.html"
							}]

						}
					]
				},
				methods: {
					//退出登录
					logout: function() {
						var _this = this;
						this.$confirm('确认退出吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(function() {
							//sessionStorage.removeItem('user');
							//_this.$router.push('/login');
							window.location.href = 'login.html';
						}).catch(function() {
							_this.$message({
								type: 'success',
								message: '取消退出'
							});
						});

					},
					handleOpen: function(key, keyPath) {
						console.log(key, keyPath);
					},
					handleClose: function(key, keyPath) {
						console.log(key, keyPath);
					},
					//折叠导航栏
					collapse: function() {
						this.collapsed = !this.collapsed;
					},
					showMenu: function(i, status) {
						console.log(status)
						this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';
					},
					getMenu:function(url){ //目录跳转
						 console.log(url)
						 document.getElementById("minWarp").src=url
						//this.$refs.minWarp.src=url;
					}
				}
			})
		</script>
	</body>

</html>